<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 800px;
            height: 800px;
            background-color: silver;
            overflow: hidden;
        }

        .box1 div {
            width: 100px;
            height: 100px;
          
            margin-bottom: 100px;
            margin-left: 0;
        }

        .box2 {
            background-color: #bfa;
            

            /* 过渡(transition)
               通过过渡可以指定一个属性发生变化时的切换方式 
               通过过渡可以创建一些效果，提升用户体验
               
               */
            /* transition-property: width,height,color; */
            /* transition-property: all; */
            /* transition-property:属性1，属性2，属性n ; 指定要过渡的属性
               多个属性间使用逗号隔开
               如果所有属性都需要指定过渡效果则用all
               大部分属性都支持过渡效果，注意过渡时必须是从一个有效值向另一个有效值进行过渡
               */

            /* transition-duration: 2s; */
            /* transition-duration:属性1的时间，属性2的时间，属性n的时间 ; 指定过渡效果的持续时间 
            transition-duration: 1s,2s;
            1s=1000ms     
               */


               /* transition-timing-function:steps(2，start); */
            /* transition-timing-function: 过渡的时序函数; 指定过渡的执行方式
            可选值
             ease 默认值 慢-快-慢
             linear 匀速运动
             ease-in  家速运动
             ease-out  减速运动
             ease-in-out  先家速后减速

             cubic-bezier()  通过函数来指定时序函数
             cubic-bezier(.1,.93,1,-0.78)
             https://cubic-bezier.com

             steps()  分步执行过渡效果
             steps(2，start)
                 可以设置第二个值
                 end  默认值 在时间结束后执行
                 start 在时间开始时执行
            */

        /* transition-delay: 2s; */
            /* transition-delay: ; 过渡效果的延迟
            等待一段时间后执行过渡
            */
            
            /* transition: ;可以同时设置过渡相关的所有属性，
            只有一个要求，两个时间中第一个是持续是延迟
             */
             transition: margin-left 2s 1s  cubic-bezier(.1,.93,1,-0.78);

        }
        .box3{
            background-color:orangered ;
            transition-property: all;
            transition-duration: 2s;
        }

        .box1:hover div {
            /* width: 200px;
            height: 200px;
            background-color: red; */
            margin-left: 700px;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

</html>